.layouts {
  height: 100%;
  overflow: hidden;
  #scrollbar.light();
  .ant-layout-header {
    position: relative;
    padding-inline: 0;
    z-index: 100;
  }
  .ant-layout-content {
    overflow: auto;
  }
  .header {
    position: relative;
    padding-inline: 12px;
    height: var(--header-height);
    box-shadow: @light-box-shadow;
    background-color: var(--light-background);
    z-index: 10;
    .third-brand {
      display: none;
      line-height: 1;
    }
    &-left {
      .open-cmdk-button {
        display: none;
      }
    }
  }
}
.dark {
  .header {
    box-shadow: @dark-box-shadow;
    background-color: var(--dark-background);
    a,
    .logo-name {
      color: #fff;
      word-break: keep-all;
    }
  }
}

@media screen and (max-width: 768px) {
  .layouts {
    .header {
      padding-inline: 16px;
    }
  }
}

@media screen and (min-width: 768px) {
  .layouts {
    .header {
      padding-inline: 16px;
      .third-brand {
        display: block;
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  .layouts {
    .header {
      .header-left .open-cmdk-button {
        display: flex;
      }
      .header-right .open-cmdk-button {
        display: none;
      }
    }
  }
}
